<template>
<div class="dynamic">
  <div>
    <tab :line-width="2" class="dyna-tab">
      <tab-item selected>已发货</tab-item>
      <tab-item>未发货</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>
  </div>

  <div class="content-unit">
    <div class="unit-header vux-1px-b">
      <span class="title">Unit Hello Fredsd 1</span>
      <a href="javascript:" class="btn-range" @click="showpop = true">更换课程</a>
    </div>
    <div class="unit-body">
      <ul class="unit-list">
        <router-link class="unit-item vux-1px-b" :to="'/linkstudentslist/46456sd'" tag="li" exact>
          <div class="renge">
            <annular deg="40"></annular>
          </div>
          <div class="desc">
            <h4>词汇学习</h4>
            <p>完成情况：30/40</p>
          </div>
          <span class="tag">查看 <x-icon type="ios-arrow-right" size="16"></x-icon></span>
        </router-link>
      </ul>
    </div>
  </div>

  <div v-transfer-dom>
    <popup v-model="showpop" position="bottom" class="popup-util">
      <div class="pop-title table-show">
        <i class="pop-close td" @click="showpop = false"><x-icon type="ios-close-empty" size="30"></x-icon></i>
        <popup-picker class="pop-text td"
                      value-text-align="left"
                      :show-name="true"
                      :data="gradelist"
                      :columns="3"
                      v-model="grade"
                      @on-show="showpop = false"
                      @on-hide="showpop = true"></popup-picker>
        <!--<i class="list-ico td"></i>-->
      </div>

      <group class="pop-grop-content">
        <cell v-for="i in 20" :key="i" :title="i"></cell>
      </group>
    </popup>
  </div>

</div>
</template>

<script>
  import { Tab, TabItem, TransferDom, Popup, Group, Cell, PopupPicker } from 'vux'
  import Annular from './Annular'
  export default{
    directives: {
      TransferDom
    },
    components: {
      Tab,
      TabItem,
      Annular,
      PopupPicker,
      Popup,
      Group,
      Cell
    },
    data() {
      return {
        showpop: false,
        grade: ['china', 'china001'],
        gradelist: [{
          name: '中国中国中国中国',
          value: 'china',
          parent: 0
        }, {
          name: '美国',
          value: 'USA',
          parent: 0
        }, {
          name: '广东广东',
          value: 'china001',
          parent: 'china'
        }, {
          name: '广西',
          value: 'china002',
          parent: 'china'
        }, {
          name: '美国001',
          value: 'usa001',
          parent: 'USA'
        }, {
          name: '美国002',
          value: 'usa002',
          parent: 'USA'
        }]
      }
    },
    created() {

    }
  }
</script>

<style lang="less">
  .tab-scroll {
     width: 100%;
     overflow:scroll;
     -webkit-overflow-scrolling:touch;
   }

  .dyna-tab {
    .vux-tab-item.vux-tab-selected {
      color: #ffa001 !important;
    }
    .vux-tab-ink-bar {
      background-color: #ffa001;
    }
  }

  .unit-header {
    height: 50px;
    border-top: 14px solid #f6f6f6;
    overflow: hidden;
    .title {
      font-size: 16px;
      line-height: 50px;
      padding-left: 14px;
    }
    .btn-range {
      position: absolute;
      top: 10px;
      right: 14px;
    }
  }
  .unit-body {
    padding: 0 14px;
    .unit-item {
      position: relative;
      list-style: none;
      padding: 10px 0;
      .renge {
        display: inline-block;
        vertical-align: middle;
      }
      .desc {
        display: inline-block;
        vertical-align: middle;
        h4 {
          font-size: 16px;
          font-weight: 400;
          color: #4a4a4a;
        }
        p {
          margin: 0;
          font-size: 12px;
          color: #9a9a9a;
        }
      }
      .tag {
        position: absolute;
        right: 0;
        top: 27px;
        color: #a8a8a8;
        svg {
          vertical-align: -2px;
          path {
            fill: #a8a8a8;
          }
        }
      }
    }
  }

  .btn-range {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    border-radius: 30px;
    text-align: center;
    width: 76px;
    font-size: 14px;
    border: 1px solid #ff7f00;
    color: #ff7f00;
    background: #fff;
  }

  .pop-title {
    position: absolute;
    top: 0;
    left: 0;
    background: #ff9000;
    color: #fff;
    height: 54px;
    width: 100%;
    z-index: 20;

    .pop-close {
      width: 50px;
      text-align: center;
      .vux-x-icon {
        position: relative;
        top: 4px;
        fill: #fff;
      }
    }
    .pop-text {
      font-size: 16px;
      text-align: center;
      // 移除默认样式
      .weui-cell__ft:after {
        display: none;
      }
      .weui-cell_access:active {
        background-color: rgba(255,255,255, .3);
      }
    }
    .list-ico {
      width: 50px;
      text-align: center;
      background: url(../assets/list.svg) no-repeat center 52%;
      background-size: 36%;
    }
  }
  .popup-util {
    height: 60% !important;
    overflow-x: hidden;
  }
  .pop-grop-content {
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
</style>
